<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="/static/jtopo/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/jtopo/js/jtopo.js" type="text/javascript" charset="utf-8"></script>
</head>

<title>实时监测拓扑图</title>
<style>
    #canvas {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0
    }
</style>

<body id="body" onselectstart="javascript:return false;" style="overflow:scroll;overflow-x:hidden;overflow-y:hidden;">
<input  id="data" type="hidden" value="{$data}"/>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
    $(function () {
        $("#canvas").attr("width", $("#body").width());
        $("#canvas").attr("height", $(window).height());
        var canvas = document.getElementById('canvas');
        var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
        var scene = new JTopo.Scene(stage); // 创建一个场景对象
//        var up_img = "/static/jtopo/img/gplot_up.png";
//        var down_img = "/static/jtopo/img/gplot_down.png";
        stage.wheelZoom = 0.85; //启动缩放，比例为0.85
        scene.backgroundColor = "242,242,242"; //场景背景颜色
        scene.alpha = 1;

        str= JSON.parse($("#data").val());
//        console.log(str.data);
        var _data = str.data;
        var click_judge = true;

        function addNode(text, data) { //添加节点
            var node = new JTopo.Node(); // 创建一个节点
            node.textPosition = "Top_Center";
            node.textOffsetY = 45;
            node.dragable = false;
            node.shadow = true;
            var _text = "";
            if (text.length >= 14) {
                _text = text.substring(0, 14);
                _text = _text + "..."
            } else {
                _text = text;
            }
            //微软雅黑&-30&0@微软雅黑&-30&20
            node.text = _text;
            node.fontColor = "51,51,51"; //字体颜色
            node.fillColor = "75,148,125"; //节点背景
            node.font = "16pt Bold"; //设置字体
            if (data != undefined) {
                node.setSize(300, 100);
            } else {
                node.setSize(300, 50);
            }
            node.showSelected = false;
//            node.borderRadius = 30; // 圆角
            scene.add(node);
            if (data != undefined) {
                setTimeout(function () {
                    var _node = new JTopo.Node(); // 创建一个节点
                    var _x = node.getLocation().x;
                    var _y = node.getLocation().y;
                    _node.textPosition = "Middle_Center";
                    console.log(data);

                    _node.text = "名称：" + data.name;
                    _node.fontColor = "51,51,51"; //字体颜色
                    _node.fillColor = "255,255,255"; //节点背景
                    _node.font = "14pt Bold"; //设置字体
                    _node.setSize(300, 50);
                    _node.showSelected = false;
                    _node.dragable = false;
                    _node.setLocation(_x, _y + 50);
                    scene.add(_node);
                   /* setTimeout(function () {
                        var img_x = node.getLocation().x;
                        var img_y = node.getLocation().y;
                        var img_node = new JTopo.Node();
//                        img_node.setImage(down_img, true);
//                        img_node.setLocation(img_x + 124, img_y + 71);
                        img_node.showSelected = false;
                        img_node.shadow = true;
                        img_node.dragable = false;
                        img_node.zIndex = 999;
                        scene.add(img_node);
                        img_node.addEventListener("click", function () {
                            var _this = this;
                            var _node = new JTopo.Node(); // 创建一个节点
                            var _x = node.getLocation().x;
                            var _y = node.getLocation().y;
                            _node.textPosition = "Middle_Center";
//                            _node.text = "是否开启：" + data.readNum;
                            _node.fontColor = "51,51,51"; //字体颜色
                            _node.fillColor = "255,255,255"; //节点背景
                            _node.font = "14pt Bold"; //设置字体
                            _node.setSize(300, 0);
                            _node.showSelected = false;
                            _node.visible = true;
                            _node.setLocation(_x, _y + 100);
                            _this.visible = false;
                            JTopo.Animate.stepByStep(_node, {
                                height: 50
                            }, 100, false).start();
                            scene.add(_node);
                            var up_node = new JTopo.Node(); // 创建一个节点
                            up_node.setImage(up_img, true);
                            up_node.setLocation(img_x + 124, img_y + 135);
                            up_node.showSelected = false;
                            up_node.shadow = true;
                            up_node.dragable = false;
                            up_node.zIndex = 999;
                            scene.add(up_node);
                            up_node.addEventListener("click", function () {
                                this.visible = false;
                                _this.visible = true;
                                function visible() {
                                    setTimeout(function () {
                                        _node.visible = false;
                                    }, 100);
                                    return false;
                                }

                                JTopo.Animate.stepByStep(_node, {
                                    height: 0
                                }, 100, visible()).start();
                            });
                        })
                    }, 1)*/
                }, 1)
            }
            return node;
        }

        function addLink(nodeA, nodeZ) { //连线
            var link = new JTopo.FoldLink(nodeA, nodeZ);
            link.strokeColor = '29,32,136';
            link.lineWidth = 2;
            scene.add(link);
            return link;
        }

        for (var i = 0; i < _data.length; i++) {
            var first = addNode("智慧农业拓扑图"); //jtopo不能设置两个顶级节点（也许是我自己没找到解决方法）
            if (_data[i].children != undefined) {
                for (var j = 0; j < _data[i].children.length; j++) {
                    var second = addNode(_data[i].children[j].cid, _data[i].children[j]);
                    addLink(first, second);
                    getnode(_data[i].children[j].children, second);
                }
            }
        }
        function getnode(elem, second) { //递归查找层级
            if (elem != undefined) {
                for (var n = 0; n < elem.length; n++) {
                    var third = addNode(elem[n].cid, elem[n]);
                    addLink(second, third);
                    if (elem[n].children != undefined) {
                        getnode(elem[n].children, third);
                    }
                }
            }
        }

        scene.doLayout(JTopo.layout.TreeLayout('down', 300, 207));
    });
</script>

</html>